<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Raster</title>
    <link rel="stylesheet" href="../css/style.css">
    <script type="text/javascript" src="../../dist/paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas">
        // Load from Server:
        var raster = new Raster('http://assets.paperjs.org/images/marilyn.jpg');
        // Load from DOM image:
        // var raster = new Raster('marilyn');
        raster.onLoad = function() {
            console.log('Successfully loaded image!');
        };
        var lastScale = 1;
        var center = view.center;
        function onFrame(event) {
            var scale = (Math.sin(event.time * 2) + 1) / 2;
            raster.scale(scale / lastScale);
            lastScale = scale;
            raster.position = center + [
                Math.sin(event.time * 3) * 256,
                Math.sin(event.time * 2.5) * 256
            ];
            raster.rotate(event.delta * 120);
        }
    </script>
</head>
<body>
    <canvas id="canvas" resize></canvas>
    <img id="marilyn" width="512" height="512" style="display: none;" src=""/>
</body>
</html>
